<template>
  <div class="search-input">
    <van-sticky>
      <div class="input-con">
        <input
          type="text"
          placeholder="搜索商品"
          v-model="kd"
          @click="$router.push(`./SearchSug?kk=${kd}`)"
        />
      </div>
      <div class="nav">
        <ul>
          <li :class="{ active: stagesType == 'yf' }" @click="changeType('yf')">
            月付
          </li>
          <li :class="{ active: stagesType == 'nf' }" @click="changeType('nf')">
            年付
          </li>
          <li :class="{ active: stagesType == 'xs' }" @click="changeType('xs')">
            销售
          </li>
          <li class="li3">
            <van-dropdown-menu active-color="#1989fa">
              <van-dropdown-item
                v-model="selectOpt"
                :options="option1"
                :title="title"
                title-class="titleActive"
              />
            </van-dropdown-menu>
          </li>
          <li @click="displayTape(true)">筛选</li>
        </ul>
      </div>
    </van-sticky>

    <!-- 商品展示 -->
    <div class="search-list" @scroll="loadMore">
      <div class="list-display" v-for="item in list" :key="item.id">
        <img :src="item.pic" alt="" />
        <div class="price">
          <p class="p">{{ item.title }}</p>
          <p class="sale">分期销售</p>
          <span><em>￥</em>{{ item.price }}/月</span>
        </div>
      </div>
      <!-- <div v-show="isShow">已经到底了</div> -->
    </div>

    <!-- 侧边栏动画 -->
    <div class="list-con animate__animated" v-show="showFilter" ref="filter">
      <button @click="displayTape(false)">隐藏</button>
      <hr />
      <!-- 侧边栏分类 -->
      <div class="cates">
        <h4>分类:</h4>
        <ul>
          <li
            :class="{ active: curCates.id == item.id }"
            @click="setCurCates(item)"
            v-for="item in catagroy"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 品牌选项  先判断下有这个数据 还要判断curCates.erpDetails这个对象有数据(第一个不限就没有值) 因为初始值是空-->
      <div
        class="brand"
        v-if="Object.keys(curCates).length && curCates.erpDetails.length"
      >
        <h4>品牌:</h4>
        <ul>
          <li
            :class="{ active: brandVal == brand.v }"
            v-for="brand in curCates.erpDetails[0].brand.content"
            :key="brand.oid"
            @click="brandVal = brand.v"
          >
            {{ brand.k }}
          </li>
        </ul>
      </div>
      <!-- 侧边栏三个固定类型  新旧对象，价格范围，服务方式 -->
      <div class="service">
        <div class="sTitle" v-for="title in service" :key="title.param">
          <h4>{{ title.label }}:</h4>
          <ul>
            <li
              :class="{
                cActive: title.param == 'condition' && condition == list.v,
                pActive: title.param == 'price' && price == list.v,
                rActive: title.param == 'rentType' && rentType == list.v,
              }"
              v-for="list in title.content"
              :key="list.v"
              @click="setType(title.param, list.v)"
            >
              {{ list.k }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 个人配置 -->
      <div
        class="personal"
        v-if="Object.keys(curCates).length && curCates.erpDetails.length"
      >
        <div v-for="p1 in curCates.erpDetails" :key="p1.v">
          <div v-for="p2 in p1.personal" :key="p2.param">
            <h4>{{ p2.label }}</h4>
            <ul>
              <li
                :class="{
                  active:
                    personal[p2.param].length == 0
                      ? item.v == ''
                      : personal[p2.param].indexOf(item.v) !== -1,
                }"
                @click="setPersonal(p2.param, item.v)"
                v-for="item in p2.content"
                :key="item.v"
              >
                {{ item.k }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- <van-loading size="24px" text-color="#0094ff" v-show="showLoading" vertical
      >加载中...</van-loading
    > -->
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { IAjaxData, IParams } from "../types/types";
export default Vue.extend({
  name: "SearchVue",

  data() {
    return {
      showLoading: false,
      kd: "",
      list: [] as IParams[],
      curPage: 1,
      // isShow: false,
      selectOpt: "", // 排序类型: 默认0 销量高低3 价格低高2 价格高低1
      stagesType: "yf", // 分期类型: 月付:yf 年付:nf 销售:xs
      option1: [
        { text: "默认排序", value: "0" },
        { text: "销量从高到低", value: "3" },
        { text: "价格从低到高", value: "2" },
        { text: "价格从高到低", value: "1" },
      ],
      title: "默认排序",
      // 映射
      sortMap: {
        0: "默认排序",
        3: "销量↓",
        2: "价格↑",
        1: "价格↓",
      } as IParams,
      // 参数
      params: {
        time: 1662336154781,
        code: "591ded2b6bab7361c63b9d96e12ea791",
        page: 1,
        size: 10,
        errorCheck: 1,
        categoryId: 0,
        sort: 0, // 默认按照 0(默认排序) 进行请求
        isHaveExtend: 0, // 默认按照 月付 请求
        title: "",
        searchStatus: 1,
        plat: 2,
        notFoundStatus: 1,
        secondSearchStatus: 1,
        customerId: "",
      } as IParams,
      // 侧边栏
      showFilter: false, // 侧边栏筛选高亮
      catagroy: [] as IParams[], // 侧边栏分类
      curCates: {} as IParams, // 分类高亮
      service: [] as IParams[], // 三个固定的类型 新旧对象，价格范围，服务方式(这三个高亮要有自己的专属状态)
      condition: "", // 新旧属性 默认的空就代表不限
      price: "", // 价格范围， 默认的空""就代表不限
      rentType: "", // 服务方式, "" 代表不限
      brandVal: "", // 品牌选项
      personal: {
        screenSize: [], // 屏幕尺寸,
        cpuModel: [], // CPU类型
        merSize: [], // 内存容量
        diskType: [], // 硬盘类型
        diskSize: [], // 硬盘容量
        graType: [], // 显卡类型
        graSize: [], // 显卡容量
        graNum: [], // 显卡型号
      } as IParams,
    };
  },

  created() {
    this.kd = this.$route.query.keyword as string;
    this.params.title = this.kd; // 因为初始值为空 在这重新赋值一下，再调用封装好的请求
    this.fn();
    // 调用侧边栏封装的接口
    this.getFilterDatas();
  },
  methods: {
    // 封装一个公共函数的接口。以便本页面多次使用，使用时直接调用这个函数即可
    async fn() {
      // this.showLoading = true;
      let params: string = "";
      for (const key in this.params) {
        params += `${key}=${this.params[key]}&`;
      }
      const data: IAjaxData = await this.$request(
        `/edian/newsCategory/queryAllProductForNew?${params}`,
        "POST"
      );
      // this.showLoading = false;
      this.list = data.data.data.items;
    },
    // 触底加载
    async loadMore(e) {
      // console.log(e.target.scrollHeight);
      if (
        e.target.scrollTop + e.target.clientHeight >=
        e.target.scrollHeight - 1
      ) {
        this.curPage++;
        let option = {
          time: 1662108888560,
          code: "c441e813642eaeec0fcc800076e42819",
          page: this.curPage,
          size: 10,
          errorCheck: 1,
          categoryId: 0,
          sort: 0,
          isHaveExtend: 0,
          title: this.kd,
          searchStatus: 1,
          plat: 2,
          notFoundStatus: 1,
          secondSearchStatus: 1,
          customerId: "",
        };

        // if (option.page > 8) {
        //   option.page = 8;
        //   return;
        // }

        let params: string = "";
        for (const key in option) {
          params += `${key}=${option[key]}&`;
        }
        const data: IAjaxData = await this.$request(
          `/edian/newsCategory/queryAllProductForNew?${params}`,
          "POST"
        ).then((data) => {
          this.list = [...this.list, ...data.data.data.items];
          // console.log(this.list);
        });
      }
    },
    // 月付 年付 等·
    changeType(type: any) {
      this.stagesType = type;
      this.params.isHaveExtend = type == "nf" ? 1 : 0;
      this.params.isSale = type == "xs" ? 1 : 0;
      this.fn();
    },
    // 侧边栏显示隐藏＋动画
    displayTape(bool: string) {
      // this.showFilter = !this.showFilter
      // this.showFilter = bool;
      // 提前声明一下 下面直接调用再使用
      const filterDiv: HTMLElement = this.$refs.filter as HTMLElement;
      if (bool) {
        this.showFilter = true;
        filterDiv.classList.add("animate__fadeInRight");
        setTimeout(() => {
          filterDiv.classList.remove("animate__fadeInRight");
        }, 500);
      } else {
        filterDiv.classList.add("animate__fadeOutRight");
        setTimeout(() => {
          filterDiv.classList.remove("animate__fadeOutRight");
          this.showFilter = false;
        }, 500);
      }
    },
    // 侧边栏分类API  封装这个请求getFilterDatas 因为分类下面还是这个接口
    async getFilterDatas() {
      const data: IAjaxData = await this.$request(
        "/edian/newsCategory/queryAllProductCatagloyForNew?time=1662336154781&code=591ded2b6bab7361c63b9d96e12ea791",
        "GET"
      );
      this.catagroy = data.data.Catagroy;
      this.curCates = this.catagroy[0]; // 分类第一个默认为高亮状态
      this.service = data.data.oldCatagroy.data.commonFacets;
      console.log(this.service);
    },
    /* 分类高亮 */
    setCurCates(cates: IParams) {
      this.curCates = cates;
    },
    /* 三个固定的类型 新旧对象，价格范围，服务方式 实现高亮 */
    setType(param: string, val: string) {
      // console.log(param,val);  // 点那个就保存谁身上
      switch (param) {
        case "condition":
          this.condition = val;
          break;
        case "price":
          this.price = val;
          break;
        case "rentType":
          this.rentType = val;
          break;
      }
    },
    /*  */
    setPersonal(param: string, val: string) {
      console.log(param, val);
      const arr = this.personal[param];
      if (arr.length) {
        // 此时应该判断当前点击的值，是否在数组中存在，存在就移除，不存在就添加
        const idx = arr.indexOf(val);
        if (idx == -1) {
          arr.push(val);
        } else {
          arr.splice(idx, 1);
        }
      } else {
        // 此时数组为空，直接添加值到数组中
        arr.push(val);
      }
    },
  },
  watch: {
    selectOpt(val) {
      this.title = this.sortMap[val];
      this.params.sort = val;
      this.fn();
    },
  },
});
</script>

<style lang="less" scoped>
.search-input {
  .input-con {
    height: 50px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 360px;
      height: 30px;
      border: none;
      border-radius: 30px;
      padding-left: 10px;
      &::-webkit-input-placeholder {
        // 专门设置placeholder的字体 不影响输入进去的字体
        font-size: 14px;
      }
    }
  }
  /* 导航 */
  .nav {
    height: 50px;
    background-color: #eee;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      // :deep(.van-dropdown-item__content){}
      ::v-deep .van-dropdown-item__content {
        width: 140px;
        left: 216px;
        font-size: 12px;
        .van-cell__title {
          margin-right: 5px;
          flex: 0;
          -webkit-box-flex: none;
          -webkit-flex: none;
          flex: none;
          // 这两个都可以用
          // span {
          //   display: block;
          //   width: 86px;
          // }
        }
      }
      .li3 {
        :deep(.van-dropdown-menu__bar) {
          .titleActive > .van-ellipsis {
            color: #1989fa;
          }
        }
      }

      .active {
        color: #1989fa;
      }
    }
  }
  /* 商品展示 */
  .search-list {
    height: calc(100vh - 150px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .list-display {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      img {
        display: block;
        width: 110px;
        height: 110px;
      }
      .price {
        margin-left: 20px;
        .p {
          font-size: 10px;
          line-height: 20px;
          color: #666d71;
        }
        .sale {
          font-size: 12px;
          width: 60px;
          padding: 0 4px;
          border: 1px solid #ef334d;
          color: #ef334d;
          line-height: 15px;
          box-sizing: border-box;
          border-radius: 3px;
          margin-right: 3px;
          margin-top: 5px;
        }
        span {
          color: #ef334d;
          font-size: 14px;
          display: block;
          margin-top: 5px;
          em {
            font-style: normal;
          }
        }
      }
    }
  }
  /* 侧边栏 */
  .list-con {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 280px;
    height: 100vh;
    overflow-y: scroll;
    z-index: 1000;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-duration: 0.5s;
    &::-webkit-scrollbar {
      display: none;
    }
    // 侧边栏分类
    // .cates {
    h4 {
      margin-top: 10px;
      margin-left: 5px;
      font-weight: normal;
      font-style: 13px;
      color: #333333;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 5px;
      li {
        margin-left: 5px;
        margin-top: 10px;
        min-width: 79px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background-color: #f0f2f5;
        border-radius: 10px;
        color: #333;
        font-size: 12px;
        border: 1px solid #f0f2f5; // 点击时让边框高亮会让原来的的盒子变大的解决方案是给自身加边框
        &.active,
        &.cActive,
        &.pActive,
        &.rActive {
          border: 1px solid #29a0ff;
          background: #fff;
          color: #29a0ff;
        }
      }
    }

    // }
    // 品牌选项
    // .brand {
    //   h4 {
    //     margin-top: 10px;
    //     margin-left: 5px;
    //     font-weight: normal;
    //     font-style: 13px;
    //     color: #333333;
    //   }
    //   ul {
    //     display: flex;
    //     flex-wrap: wrap;
    //     padding: 5px;
    //     li {
    //       margin-left: 5px;
    //       margin-top: 10px;
    //       min-width: 79px;
    //       height: 25px;
    //       line-height: 25px;
    //       text-align: center;
    //       background-color: #f0f2f5;
    //       border-radius: 10px;
    //       color: #333;
    //       font-size: 12px;
    //       border: 1px solid #f0f2f5;
    //       &.active {
    //         border: 1px solid #29a0ff;
    //         background: #fff;
    //         color: #29a0ff;
    //       }
    //     }
    //   }
    // }

    // 三个固定类型 新旧对象，价格范围，服务方式
    // .service {
    //   .sTitle {
    //     h4 {
    //       margin-top: 5px;
    //       margin-left: 5px;
    //       font-weight: normal;
    //       font-style: 13px;
    //       color: #333333;
    //     }
    //     ul {
    //       display: flex;
    //       flex-wrap: wrap;
    //       padding: 10px;
    //       li {
    //         margin-left: 5px;
    //         margin-top: 10px;
    //         min-width: 79px;
    //         height: 25px;
    //         line-height: 25px;
    //         text-align: center;
    //         background-color: #f0f2f5;
    //         border-radius: 10px;
    //         color: #333;
    //         font-size: 12px;
    //         border: 1px solid #f0f2f5;
    //         &.cActive,
    //         &.pActive,
    //         &.rActive {
    //           border: 1px solid #29a0ff;
    //           background: #fff;
    //           color: #29a0ff;
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>
